<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Title</title>
    <script src="../js/layer.m.js"></script>
</head>
<body>
<style type="text/css">
	a{
        display: inline-block;
        vertical-align: top;
        margin: 0 5px 10px 0;
        height: 36px;
        line-height: 36px;
        border-radius: 3px;
        padding: 0 30px;
        background-color: #FF4351;
        color: #fff;
        border: none;
        text-decoration: none;
    }
</style>
<p class="demo" id="trys" style="margin-top: 20px;">
    <a href="javascript:;" onclick="xx()">信息框</a>
    <a href="javascript:;" onclick="ts()">提示</a>
    <a href="javascript:;" onclick="xw()">询问框</a>
    <a href="javascript:;" onclick="db()">底部对话框</a>
    <a href="javascript:;" onclick="tss()">底部提示</a>
    <a href="javascript:;" onclick="bts()">自定义标题风格</a>
    <a href="javascript:;" onclick="ymc()">页面层</a>
    <a href="javascript:;" onclick="loading()">loading层</a>
    <a href="javascript:;" onclick="loadings()">loading带文字</a>
    <a href="javascript:;" onclick="btsd()">完整对话框</a>
    <a href="javascript:;" onclick="btsd3()">设置3秒自动关闭</a>
    <a href="javascript:;" onclick="btsd34()">设置不允许点遮罩关闭：</a>
    <a href="javascript:;" onclick="hipage()">设置不允许点遮罩关闭：</a>
    <a href="javascript:;" onclick="img('http://img.he29.com/blog/0b496925c756b624d82142827d6bc163.jpg','关闭！！！！！')">看图片</a>
    <a href="bot.html">小tips</a>
</p>
</body>
<script type="text/javascript">
    function xx() {
        layer.open({
            content: '移动版和PC版不能同时存在同一页面'
            ,btn: '我知道了'
        });
    }
    function ts() {
        layer.open({
            content: 'hello 天明~~'
            ,skin: 'msg'
            ,time: 2 //2秒后自动关闭
        });
    }
    function xw() {
        layer.open({
            content: '您确定要刷新一下本页面吗？'
            ,btn: ['刷新', '不要']
            ,yes: function(index){
                location.reload();
                layer.close(index);
            }
        });
    }
    function db() {
        layer.open({
            content: '这是一个底部弹出的询问提示'
            ,btn: ['删除', '取消']
            ,skin: 'footer'
            ,yes: function(index){
                layer.open({content: '执行删除操作'})
            }
        });
    }
    function tss() {
        layer.open({
            content: '一个没有任何按钮的底部提示'
            ,skin: 'footer'
        });
    }
    function bts() {
        layer.open({
            title: [
                '我是标题',
                'background-color: #FF4351; color:#fff;'
            ]
            ,content: '标题风格任你定义。'
        });
    }
    function ymc() {
        layer.open({
            type: 1
            ,content: '可传入任何内容，支持html。一般用于手机页面中'
            ,anim: 'up'
            ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
        });
    }
    function loading() {
        layer.open({type: 2});
    }
    function loadings() {
        layer.open({
            type: 2
            ,content: '加载中'
        });
    }
    function btsd() {
        layer.open({
            title: [
                '我是标题',
                'background-color:#8DCE16; color:#fff;'
            ]
            ,anim: 'up'
            ,content: '展现的是全部结构'
            ,btn: ['确认', '取消']
        });
    }
    function btsd3() {
        layer.open({
            content: '通过style设置你想要的样式'
            ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
            ,time: 3
        });
    }
    function btsd34() {
        layer.open({
            content: '不允许点击遮罩关闭',
            btn: '我知道了',
            shadeClose: false,
            yes: function(){
                layer.open({
                    content: '好的'
                    ,time: 2
                    ,skin: 'msg'
                });
            }
        });
    }
    function hipage() {
        var html = '<h2>444</h2>'
        var pageii = layer.open({
            type: 1
            ,content: html
            ,anim: 'up'
            ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
        });
    }
    
    function img(img,btn) {
        btn = btn ==undefined?'我知道了':btn;
        layer.open({
            content: '<div><style>.layui-m-layercont{padding:0}</style><img style="width:100%;display:block" src="'+img+'"></div>',
            style:'padding:0;margin:0',
            btn: btn
        });
    }
</script>
</html>